<template>
  <div class="pruduct-select">
    <div class="pruduct-detai">
      <img :src="productDetail.cover" alt />
      <div>
        <span>{{ productDetail.name }}</span>
        <span>{{ productDetail.introduction }}</span>
        <span>
          <i class="iconfont makerqian"></i>
          {{ transactionPrice }}
        </span>
      </div>
    </div>
    <div class="pruduct-type-select">
      <div v-for="(item, index) in dataList" :key="index">
        <type-select
          :active-id="item.activeId"
          :type-title="item.title"
          :type-list="item.list"
          @handleSelect="handleSelect"
        />
      </div>
    </div>
    <div class="need-mun">
      <span>购买数量：</span>
      <nut-stepper
        :simple="false"
        :readonly="true"
        :value.sync="munValue"
        @change="handleChangeVal"
      />
    </div>
    <div class="add-btn">
      <nut-button block shape="circle" @click="handleGoSelectPhoto">立即定制</nut-button>
    </div>
  </div>
</template>

<script>
import TypeSelect from '../../../components/TypeSelect';

export default {
  name: 'PruductSelect',
  props: {
    typeList: {
      type: Array,
      default: () => [],
    },
    transactionPrice: {
      type: Number,
      default: 0,
    },
    productDetail: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    TypeSelect,
  },

  data() {
    return {
      munValue: 1,
      dataList: [],
    };
  },
  created() {
    this.dataList = this.typeList;
  },
  methods: {
    handleSelect(d) {
      this.dataList.forEach((item) => {
        if (item.title === d.typeName) {
          item.activeId = d.id;
        }
      });
      this.$emit('handleSelect');
    },
    handleChangeVal() {
      this.$emit('handleChangeVal', this.munValue);
    },
    handleGoSelectPhoto() {
      this.$router.push('/cottonIn/orderList');
    },
  },
  watch: {
    typeList() {
      this.dataList = this.typeList;
    },
    // typeSelectlist() {
    //   console.log('typeSelectlist=', this.typeSelectlist);
    // },
  },
};
</script>

<style scoped lang="scss">
.pruduct-select {
  width: 90vw;
}
.pruduct-detai {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5vw;
  img {
    width: 20vw;
    height: 20vw;
    border-radius: 10px;
    overflow: hidden;
    background-color: pink;
  }
  & > div {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 64vw;
    }
  }
  & > div > span:first-child {
    font-size: 18px;
    color: #202020;
    margin-bottom: 0.5vh;
    font-weight: bolder;
  }
  & > div > span:nth-child(2) {
    font-size: 12px;
    color: #a4a4a4;
    margin-bottom: 1.5vh;
  }
  & > div > span:last-child {
    font-size: 22px;
    color: #fd5e4b;
  }
}
.pruduct-type-select {
  width: 100%;
  max-height: 50vh;
  overflow: auto;
  // height: 40vh;
  // background-color: pink;
}
.need-mun {
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-btn {
  width: 80vw;
  padding-bottom: 1vh;
  // margin-top: 5vh;
  // margin-left: 5vw;
  // margin-bottom: 10vw;
  .nut-button {
    background: #ff7e00;
  }
}
</style>
